<template>
  <div class="field-metadata-page">
    <el-card>
      <template #header>
        <div class="header-bar">
          <span>字段元数据管理</span>
          <div>
            <el-input v-model="search.keyword" placeholder="字段名称" size="small" style="width: 200px" clearable />
            <el-select v-model="sortKey" size="small" style="width: 150px; margin-left: 10px">
              <el-option label="按名称排序" value="name" />
              <el-option label="按类型排序" value="type" />
              <el-option label="按目录分组排序" value="catalog" />
            </el-select>
            <el-button type="primary" size="small" @click="openEditDialog()" style="margin-left: 10px">新增字段</el-button>
          </div>
        </div>
      </template>

      <el-table :data="sortedFields" border stripe style="width: 100%">
        <el-table-column prop="id" label="ID" width="60" />
        <el-table-column prop="name" label="字段名称" />
        <el-table-column prop="type" label="类型" width="120" />
        <el-table-column prop="length" label="长度" width="80" />
        <el-table-column prop="catalog" label="所属目录" width="160" />
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button type="primary" link @click="viewDetail(row)">用途</el-button>
            <el-button type="info" link @click="viewMatch(row)">匹配</el-button>
            <el-button type="warning" link @click="openEditDialog(row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog v-model="detailVisible" title="字段用途说明" width="500px">
      <div>{{ detailTarget?.description }}</div>
      <template #footer>
        <el-button @click="detailVisible = false">关闭</el-button>
      </template>
    </el-dialog>

    <el-dialog v-model="matchVisible" title="字段匹配信息" width="500px">
      <div>{{ matchTarget?.mapping }}</div>
      <template #footer>
        <el-button @click="matchVisible = false">关闭</el-button>
      </template>
    </el-dialog>

    <el-dialog v-model="editVisible" :title="editTarget ? '编辑字段' : '新增字段'" width="500px">
      <el-form :model="editForm" label-width="100px">
        <el-form-item label="字段名称"><el-input v-model="editForm.name" /></el-form-item>
        <el-form-item label="字段类型"><el-input v-model="editForm.type" /></el-form-item>
        <el-form-item label="字段长度"><el-input v-model="editForm.length" /></el-form-item>
        <el-form-item label="所属目录"><el-input v-model="editForm.catalog" /></el-form-item>
        <el-form-item label="字段用途"><el-input v-model="editForm.description" /></el-form-item>
        <el-form-item label="匹配信息"><el-input v-model="editForm.mapping" /></el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editVisible = false">取消</el-button>
        <el-button type="primary" @click="saveField">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'

const search = ref({ keyword: '' })
const sortKey = ref('')

const fields = ref([
  { id: 1, name: 'user_id', type: 'INT', length: 11, catalog: '用户目录A', description: '用于唯一标识用户', mapping: '与订单目录B.user_id 关联' },
  { id: 2, name: 'username', type: 'VARCHAR', length: 50, catalog: '用户目录A', description: '用户名，登录使用', mapping: '与日志目录D.user 映射' },
  { id: 3, name: 'email', type: 'VARCHAR', length: 100, catalog: '用户目录A', description: '用户电子邮箱', mapping: '无' },
  { id: 4, name: 'order_id', type: 'BIGINT', length: 20, catalog: '订单目录B', description: '订单主键', mapping: '与财务目录J.order_id 对应' },
  { id: 5, name: 'amount', type: 'DECIMAL', length: 10, catalog: '订单目录B', description: '订单金额', mapping: '与财务目录J.amount 同结构' },
  { id: 6, name: 'device_id', type: 'VARCHAR', length: 40, catalog: '设备目录F', description: '设备唯一标识码', mapping: '与传感器目录C.device_id 对应' },
  { id: 7, name: 'status', type: 'CHAR', length: 1, catalog: '设备目录F', description: '设备运行状态', mapping: '0=停机 1=运行' },
  { id: 8, name: 'timestamp', type: 'DATETIME', length: 0, catalog: '日志目录D', description: '记录时间戳', mapping: '所有目录通用字段' },
  { id: 9, name: 'log_level', type: 'VARCHAR', length: 10, catalog: '日志目录D', description: '日志级别', mapping: 'INFO/WARN/ERROR' },
  { id: 10, name: 'sensor_value', type: 'FLOAT', length: 8, catalog: '传感器目录C', description: '采集的传感器读数', mapping: '无' },
  { id: 11, name: 'config_key', type: 'VARCHAR', length: 100, catalog: '配置目录E', description: '配置项键名', mapping: '与系统默认配置结构一致' },
  { id: 12, name: 'config_value', type: 'TEXT', length: 0, catalog: '配置目录E', description: '配置项值内容', mapping: '无' },
  { id: 13, name: 'product_code', type: 'VARCHAR', length: 20, catalog: '库存目录H', description: '产品唯一编号', mapping: '与订单目录B.product_code 关联' },
  { id: 14, name: 'stock_qty', type: 'INT', length: 6, catalog: '库存目录H', description: '当前库存数量', mapping: '与销售目录比对' },
  { id: 15, name: 'note', type: 'TEXT', length: 0, catalog: '财务目录J', description: '备注信息', mapping: '自由文本，无结构限制' },
])

const detailVisible = ref(false)
const matchVisible = ref(false)
const editVisible = ref(false)
const detailTarget = ref(null)
const matchTarget = ref(null)
const editTarget = ref(null)

const editForm = ref({ name: '', type: '', length: 0, catalog: '', description: '', mapping: '' })

const filteredFields = computed(() => {
  return fields.value.filter(f => !search.value.keyword || f.name.includes(search.value.keyword))
})

const sortedFields = computed(() => {
  const list = [...filteredFields.value]
  if (sortKey.value) {
    return list.sort((a, b) => String(a[sortKey.value]).localeCompare(String(b[sortKey.value])))
  }
  return list
})

function viewDetail(row) {
  detailTarget.value = row
  detailVisible.value = true
}

function viewMatch(row) {
  matchTarget.value = row
  matchVisible.value = true
}

function openEditDialog(row = null) {
  editTarget.value = row
  editForm.value = row ? { ...row } : { name: '', type: '', length: 0, catalog: '', description: '', mapping: '' }
  editVisible.value = true
}

function saveField() {
  if (editTarget.value) {
    Object.assign(editTarget.value, editForm.value)
    ElMessage.success('字段更新成功')
  } else {
    const id = fields.value.length + 1
    fields.value.push({ id, ...editForm.value })
    ElMessage.success('新增字段成功')
  }
  editVisible.value = false
}
</script>

<style scoped>
.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
</style>
